.upload-file-site {
  // width: 470px;
  line-height: 1.5;

  //拖拽上传按钮
  .dragger-plus {
    margin-bottom: 8px;
  }

  //长方形布局上传按钮
  .rectangle-plus {
    margin-bottom: 8px;
  }

  .file-list {
    overflow: hidden;
  }

  //文件共同样式
  .file-item {
    padding: 6px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    overflow: hidden;
    &.err {
      border: 1px solid red;
    }

    //文件头像
    .file-icon {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 30px;
      overflow: hidden;

      img {
        max-height: 100%;
        max-width: 100%;
      }
    }

    //进度条
    .upload-rate {
      width: 100%;
      height: 4px;
      background-color: #d9d9d9;
      border-radius: 2px;
      overflow: hidden;

      .rate {
        height: 100%;
        background-color: springgreen;
        width: 0%;
        transition: width 300ms;
      }
    }

    //上传错误
    .upload-err {
      color: red;
    }

    //操作按钮
    .file-btns {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;

      .file-btn {
        margin-right: 6px;
        transition: transform 300ms;
        &:last-of-type {
          margin-right: 0;
        }
        &.btn-cancel {
          color: red;
          font-size: 12px;
          cursor: pointer;
        }
        &:hover {
          transform: scale(1.3);
        }
      }
    }
  }

  //长方形布局
  .file-rectangle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    height: 62px;
    margin-top: 8px;
    &:first-of-type {
      margin-top: 0;
    }

    .file-icon {
      width: 48px;
      height: 48px;
    }

    .file-meddle {
      flex: 1;
      font-size: 12px;
      padding: 0 10px;

      .file-name {
        word-break: break-all;
      }

      .upload-rate {
        margin-top: 4px;
      }

      .upload-err {
        margin-top: 2px;
      }

      .upload-success {
        margin-top: 2px;
        color: springgreen;
      }
    }
  }

  //方形布局
  .file-square {
    position: relative;
    float: left;
    height: 72px;
    width: 72px;
    margin-right: 4px;
    margin-bottom: 4px;
    &:last-of-type {
      margin-right: 0;
    }
    &.square-plus {
      border: 1px dashed #d9d9d9;
      transition: border-color 500ms;
      &:hover {
        border-color: #6eafec;
      }
    }

    &:hover .file-btns{
      opacity: 1;
    }

    .file-icon {
      height: 100%;
      width: 100%;
    }

    .status-wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 2;
      padding: 6px;
      width: 100%;
      height: 100%;

      .upload-rate {
        height: 8px;
      }

      .upload-err {
        font-size: 10px;
        line-height: 14px;
        padding: 1px 4px;
        min-width: 100%;
        margin: 0 -6px;
        text-align: center;
        background-color: rgba(0,0,0,.7);
      }
    }

    .file-btns {
      position: absolute;
      height: 100%;
      width: 100%;
      left: 0;
      top: 0;
      z-index: 3;
      padding: 8px;
      background-color: rgba(0,0,0,.8);
      opacity: 0;
      transition: opacity 300ms;
    }
  }
}

//图片裁剪框
.upload-modal-body {
  width: 100%;
  overflow-x: auto;

  .upload-image-crop {
    display: flex;
    height: 420px;
    width: 700px;
    padding-bottom: 20px;
    overflow: auto;
  }
}
